import React from "react";
import './ShowDataBlock.css'
import PriceChangeFun from '../../utils/PriceChangeFun'

const ShowDataBlock = function (props) {
  const DataBlockList = props.BlockArray
  const IsUp = (Data) => {
    if (Data === 1) {
      return (
        <span className="ArrayUp">↑</span>
      )
    }
    else if (Data === 2) {
      return (
        <span className="ArrayDown">↓</span>
      )
    }
    return
  }
  return (
    <>
      <div className="DataBlockBox">
        {
          DataBlockList && DataBlockList.map((item) => {
            if (item.money) {
              return (
                <div className="DataBlockItem" key={item.key}>
                  <p className="DataBlockItem_Title">{item.title}</p>
                  <p className="DataBlockItem_Content">￥{PriceChangeFun(item.money)} { IsUp(item.isUp) }</p>
                </div>
              )
            }
            return (
              <div className="DataBlockItem" key={item.key}>
                <p className="DataBlockItem_Title">{item.title}</p>
                <p className="DataBlockItem_Content">{ PriceChangeFun(item.num) }{ IsUp(item.isUp) }</p>
              </div>
            )
          })
        }
      </div>
    </>
  )
}

export default ShowDataBlock;